<template>
  <div>
    <!-- Loading state -->
    <div v-if="loading" class="loading-container">
      <div class="loading-spinner"></div>
      <div class="loading-message">Generating your test report...</div>
    </div>

    <!-- Report content -->
    <div v-else class="report-container" ref="report">
      <!-- <h1 class="report-title">Test Results Report</h1> -->
      <div class="result-header-card" v-if="dimensionResults.length > 0">
        <h1 class="result-title">Your Moose Sexual Preference Test report has been generated.</h1>
        <p class="result-description">Unlock Your Unique Preferences and Explore Your True Desires and Relationship Needs Join over 154,987 people who have discovered their true character and emotional inclinations. Only 4% of people worldwide share similar traits with you!</p>
      </div>
      <!-- Dimension score results list -->
      <div class="dimensions-results" v-if="dimensionResults.length > 0">
        <h2>Radar Chart Dimensions</h2>
        <!-- 雷达图 -->
        <p class="chart-description">The following is the distribution of your dimensions</p>
        <div class="radar-chart-card">
          <div class="radar-chart">
            <div id="radar-chart-container" ref="radarChart"></div>
          </div>
        </div>
        <h2>Here is the distribution of your sexual preference attributes across 23 dimensions</h2>
        <div class="dimension-item" v-for="dimension in dimensionResults" :key="dimension.id">
          <div class="dimension-header">
            <h3 class="dimension-name">
              <i>{{ dimension.name }}</i>
              <span class="level">({{ getLevelText(dimension.level) }})</span>
            </h3>
          </div>

          <div class="dimension-progress">
            <div class="progress-bar">
              <div class="progress-fill" :style="{ width: `${getProgressPercentage(dimension.score)}%` }"></div>
              <div class="score-value" :style="{ left: `${getProgressPercentage(dimension.score)}%` }">{{ dimension.score }}</div>
            </div>
          </div>

          <div class="dimension-analysis">
            <div class="analysis-section">
              <p v-html="dimension.analysis"></p>
            </div>
          </div>

          <div class="dimension-note">
            <div class="tit"><img src="../assets/images/suggestion.webp" alt="" /> Suggestion</div>
            <p v-if="dimension.suggestion" v-html="dimension.suggestion"></p>
          </div>

          <!-- <div class="dimension-suggestion" v-if="dimension.suggestion">
            <h4>Suggestion</h4>
            <p>{{ dimension.suggestion }}</p>
          </div> -->
        </div>
      </div>

      <!-- No results state -->
      <div class="no-results" v-else-if="!loading && dimensionResults.length === 0">
        <div class="no-results-icon">😕</div>
        <h2>No Dimension Analysis Results</h2>
        <p>No dimension analysis results were found. This may be because you have not completed the test or the test data is incomplete.</p>
        <p>Please try taking the test again.</p>
      </div>

      <!-- Return button -->
      <div class="actions">
        <button class="action-button" @click="restartTest">Restart Test</button>
      </div>
    </div>

    <!-- Share buttons -->
    <!-- <div class="share-buttons" :class="{ 'show-buttons': showButtons }">
      <button class="share-btn" @click="showShare">
        <img src="../assets/images/share.webp" alt="" />
        Share
      </button>
      <button class="send-btn" @click="downloadReport" :disabled="isDownloading">
        <template v-if="isDownloading">
          <div class="loading-spinner-small"></div>
          Downloading...
        </template>
        <template v-else>
          <img src="../assets/images/send.webp" alt="" />
          Download
        </template>
      </button>
    </div> -->

    <!-- Share modal -->
    <!-- <div v-if="showShareModal" class="share-modal-mask">
      <div class="share-modal" ref="shareModal">
        <button class="close-btn" @click="showShareModal = false">
          <img src="../assets/images/close.webp" alt="" />
        </button>
        <img class="modal-illustration" src="../assets/images/share_top_bg.webp" alt="" />
        <div class="modal-title">My Dimension Analysis</div>
        <div class="modal-trait-tip">Only 3.5% of people got the same result as me.</div>
        <div class="modal-divider"></div>
        <img class="modal-qrcode" :src="qrCodeDataURL" alt="QR Code" />
        <div class="modal-tip">Press and hold to view your complete dimension analysis</div>
        <button class="save-btn" @click="saveShareImage">Save</button>
      </div>
    </div> -->
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
// import html2canvas from 'html2canvas'
// import QRCode from 'qrcode'
import * as echarts from 'echarts'

import report_elk from '../utils/report_elk.json'

export default {
  name: 'DimensionReport',
  data() {
    return {
      loading: true,
      dimensionResults: [],
      dimensionsData: {},
      scoreResults: {}, // 保存每个维度的得分
      showShareModal: false,
      qrCodeDataURL: '', // 存储生成的二维码数据URL
      // defaultQrCodeUrl: 'https://www.quizee.net/#/', // 默认二维码图片URL
      showButtons: false, // 控制按钮显示状态
      isDownloading: false, // 添加下载状态
      radarChart: null,
      radarDimensions: [],
      radarData: [],
    }
  },
  computed: {
    ...mapState({
      answers: (state) => state.answers,
    }),
  },
  methods: {
    ...mapMutations(['resetTest', 'clearAllData']),

    // 获取维度分析报告数据
    async fetchDimensionsData() {
      try {
        // const response = await fetch('/report_elk.json')
        const data = report_elk
        console.log('data', report_elk)

        // const data = await response.json()
        return data.dimensions
      } catch (error) {
        console.error('Failed to fetch dimension analysis data:', error)
        return []
      }
    },

    // 计算每个维度的得分
    calculateDimensionScores() {
      const scoreResults = {}

      // 从store中获取用户的答案
      const answers = this.answers || []
      // console.log('Answer data:', answers)

      // 如果没有答案数据，设置提示信息而不是直接返回
      if (answers.length === 0) {
        this.loading = false
        this.dimensionResults = []
        this.scoreResults = {
          dimensions: [],
          total: 0,
        }
        // 可以在这里添加提示信息或其他逻辑
        return
      }

      // 遍历所有答案，计算每个维度的总分
      answers.forEach((answer) => {
        // 确保答案有维度信息
        if (answer.dimensions && answer.dimensions.length > 0) {
          // 获取该题选择的选项得分
          const score = answer.score || 0

          // 将得分加到每个相关维度上
          answer.dimensions.forEach((dimensionName) => {
            // 如果维度还未在结果中初始化，则创建它
            if (!scoreResults[dimensionName]) {
              scoreResults[dimensionName] = {
                totalScore: 0,
                count: 0,
              }
            }

            // 累加分数和计数
            scoreResults[dimensionName].totalScore += score
            scoreResults[dimensionName].count += 1
          })
        }
      })

      // console.log('Dimension score calculation results:', scoreResults)
      // 保存计算结果
      this.scoreResults = scoreResults

      // 加载维度分析报告数据并生成最终结果
      this.generateDimensionResults()
    },

    // 生成最终的维度结果
    async generateDimensionResults() {
      try {
        // 获取维度分析报告数据
        const dimensionsData = await this.fetchDimensionsData()
        this.dimensionsData = dimensionsData
        // console.log('Dimension analysis report data:', dimensionsData)

        // 处理每个维度的结果
        const results = []

        // 遍历已计算的维度得分
        Object.keys(this.scoreResults).forEach((dimensionName) => {
          const scoreData = this.scoreResults[dimensionName]

          // 确保至少有一次回答才计算分数
          if (scoreData.count === 0) return

          // 获取该维度的总分
          const totalScore = scoreData.totalScore

          // 在维度分析报告中查找对应的维度数据
          const dimensionData = dimensionsData.find((d) => d.name === dimensionName)

          if (dimensionData) {
            // 根据总分确定级别：低(0-8)、中(9-15)、高(16+)
            let level = 'low'
            if (totalScore >= 16) {
              level = 'high'
            } else if (totalScore >= 9) {
              level = 'medium'
            }

            // 添加到结果中
            results.push({
              id: dimensionData.id,
              name: dimensionName,
              score: totalScore,
              level: level,
              analysis: dimensionData.analysis[level], // 获取对应级别的分析文案
              note: dimensionData.note,
              suggestion: dimensionData.suggestion,
            })
          } else {
            console.warn(`No analysis data found for dimension "${dimensionName}", please check if the dimension name matches`)
          }
        })

        // console.log('Final dimension analysis results:', results)

        // 按照分数从高到低排序显示
        this.dimensionResults = results.sort((a, b) => b.score - a.score)

        // 如果没有结果，显示错误信息
        if (results.length === 0) {
          console.error('No dimension results found, please check if answers and dimension data match')
        }

        // 准备雷达图数据
        if (this.dimensionResults.length > 0) {
          // 最多取前5个维度显示在雷达图上
          const topDimensions = this.dimensionResults.slice(0, 5)
          this.radarDimensions = topDimensions.map((item) => item.name || '')
          this.radarData = topDimensions.map((item) => this.getProgressPercentage(item.score) || 0)
        }

        this.loading = false

        // 初始化雷达图
        this.$nextTick(() => {
          this.initRadarChart()
        })
      } catch (error) {
        console.error('Failed to generate dimension results:', error)
        this.loading = false
      }
    },

    // 获取级别对应的中文文本
    getLevelText(level) {
      const levelTexts = {
        low: 'low',
        medium: 'medium',
        high: 'high',
      }
      return levelTexts[level] || '未知'
    },

    // 计算进度条百分比
    getProgressPercentage(score) {
      // 固定各维度最高分为44分
      const maxScore = 44
      // 计算百分比，限制在0-100之间
      return Math.min(Math.max(Math.round((score / maxScore) * 100), 0), 100)
    },

    // 重新开始测试
    restartTest() {
      this.resetTest()
      this.$router.push('/')
    },

    // 下载报告
    // async downloadReport() {
    //   this.isDownloading = true // 添加下载状态
    //   const el = this.$refs.report
    //   if (!el) {
    //     this.isDownloading = false
    //     return
    //   }

    //   // 找到并隐藏分享按钮
    //   const shareButtons = el.querySelector('.share-buttons')
    //   let buttonsWereVisible = false

    //   if (shareButtons) {
    //     buttonsWereVisible = shareButtons.style.display !== 'none'
    //     shareButtons.style.display = 'none'
    //   }

    //   // 找到attribute-name元素并修改样式
    //   const attributeNameElements = el.querySelectorAll('.dimension-name')
    //   let originalStyles = []

    //   if (attributeNameElements.length > 0) {
    //     attributeNameElements.forEach((el, index) => {
    //       // 保存原始样式
    //       originalStyles[index] = el.getAttribute('style') || ''
    //     })
    //   }

    //   // 等待DOM更新
    //   await this.$nextTick()

    //   try {
    //     // 设置更高的scale以提高清晰度
    //     const pixelRatio = Math.max(window.devicePixelRatio || 1, 2)

    //     // 生成图片
    //     const canvas = await html2canvas(el, {
    //       useCORS: true,
    //       backgroundColor: null,
    //       scrollY: 0,
    //       scale: pixelRatio,
    //       allowTaint: true,
    //       logging: false,
    //       windowWidth: document.documentElement.offsetWidth,
    //       windowHeight: document.documentElement.offsetHeight,
    //     })

    //     const url = canvas.toDataURL('image/png', 1.0)
    //     const link = document.createElement('a')
    //     link.href = url
    //     link.download = 'dimension_analysis.png'
    //     link.click()

    //     // 清理资源
    //     canvas.remove()
    //     link.remove()
    //   } catch (error) {
    //     console.error('Download report failed:', error)
    //   } finally {
    //     // 无论成功失败，都恢复原状态

    //     // 恢复attribute-name元素样式
    //     if (attributeNameElements.length > 0) {
    //       attributeNameElements.forEach((el, index) => {
    //         // 恢复原始样式
    //         if (originalStyles[index]) {
    //           el.setAttribute('style', originalStyles[index])
    //         }
    //       })
    //     }

    //     // 恢复按钮显示
    //     if (shareButtons && buttonsWereVisible) {
    //       shareButtons.style.display = ''
    //     }

    //     this.isDownloading = false // 重置下载状态
    //   }
    // },

    // async saveShareImage() {
    //   const el = this.$refs.shareModal
    //   if (!el) return
    //   const canvas = await html2canvas(el, { useCORS: true, backgroundColor: null })
    //   const url = canvas.toDataURL('image/png')
    //   const link = document.createElement('a')
    //   link.href = url
    //   link.download = 'dimension_analysis.png'
    //   link.click()
    // },

    // // 显示分享模态框
    // showShare() {
    //   this.showShareModal = true
    //   // 显示模态框时生成二维码
    //   this.$nextTick(() => {
    //     this.generateQRCode()
    //   })
    // },

    // 生成二维码
    // generateQRCode() {
    //   // 获取当前页面URL或自定义分享URL
    //   const shareUrl = this.getShareUrl()

    //   // 生成二维码
    //   QRCode.toDataURL(shareUrl, {
    //     width: 180,
    //     margin: 2,
    //     color: {
    //       dark: '#775AE0', // 紫色二维码
    //       light: '#FFFFFF', // 白色背景
    //     },
    //   })
    //     .then((url) => {
    //       this.qrCodeDataURL = url
    //     })
    //     .catch((err) => {
    //       console.error('生成二维码失败:', err)
    //       // 如果生成失败，回退到静态图片
    //       this.qrCodeDataURL = this.defaultQrCodeUrl
    //     })
    // },

    // 获取分享URL
    getShareUrl() {
      // 构建带有报告ID的URL
      const baseUrl = window.location.origin
      // 构造完整的分享URL
      return baseUrl
    },

    // 检查滚动位置
    checkScroll() {
      // 获取页面滚动位置
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop

      // 当滚动超过300px时显示按钮
      this.showButtons = scrollTop > 300
    },

    // 初始化雷达图
    initRadarChart() {
      if (this.radarChart) {
        this.radarChart.dispose()
      }

      // 模拟数据加载
      setTimeout(() => {
        // 初始化ECharts实例
        this.radarChart = echarts.init(this.$refs.radarChart)

        // 准备雷达图的指示器
        const indicators = this.radarDimensions.map((name) => {
          return { name, max: 44 }
        })

        // 配置项
        const option = {
          backgroundColor: 'transparent',
          radar: {
            indicator: indicators,
            shape: 'polygon',
            splitNumber: 5,
            name: {
              // 雷达图各类别名称文本颜色
              textStyle: {
                color: '#775AE0',
                lineHeight: 18, // 设置行高
                padding: [0, 5], // 设置内边距，增加文本周围的空间
                fontFamily: 'NotoSans', // 使用本地字体
                fontSize: 12, // 设置字体大小
                fontWeight: '500', // 设置字体粗细
              },
              formatter: function (text) {
                // 如果文本超过10个字符，添加换行
                if (text.length > 10) {
                  const words = text.split(' ')
                  if (words.length > 1) {
                    const half = Math.ceil(words.length / 2)
                    return words.slice(0, half).join(' ') + '\n' + words.slice(half).join(' ')
                  }
                  return text
                }
                return text
              },
            },
            splitLine: {
              lineStyle: {
                color: ['#e8dbff'],
              },
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ['#F8F2FF'],
              },
            },
            axisLine: {
              lineStyle: {
                color: '#e8dbff',
              },
            },
          },
          series: [
            {
              name: 'Dimension Attributes',
              type: 'radar',
              data: [
                {
                  value: this.radarData,
                  name: 'Your attributes',
                  areaStyle: {
                    color: 'rgba(119, 90, 224, 0.5)',
                  },
                  lineStyle: {
                    width: 1,
                    color: '#775AE0',
                    type: 'solid',
                    opacity: 1,
                    smooth: true,
                  },
                  symbol: 'circle',
                  symbolSize: 0,
                  itemStyle: {},
                },
              ],
            },
          ],
        }

        // 使用配置项设置图表
        this.radarChart.setOption(option)
      }, 500)

      // 窗口大小变化时，图表自适应调整
      window.addEventListener('resize', this.resizeRadarChart)
    },

    // 调整雷达图大小
    resizeRadarChart() {
      if (this.radarChart) {
        this.radarChart.resize()
      }
    },
  },
  created() {
    // 计算维度得分
    this.calculateDimensionScores()
  },
  mounted() {
    // 添加滚动事件监听
    window.addEventListener('scroll', this.checkScroll)

    // 初始检查一次滚动位置
    this.$nextTick(() => {
      this.checkScroll()
    })

    // // 预先生成二维码
    // this.$nextTick(() => {
    //   this.generateQRCode()
    // })
  },
  beforeDestroy() {
    // 移除滚动事件监听
    window.removeEventListener('scroll', this.checkScroll)

    // 组件销毁前移除resize监听
    window.removeEventListener('resize', this.resizeRadarChart)
    // 销毁ECharts实例
    if (this.radarChart) {
      this.radarChart.dispose()
      this.radarChart = null
    }
  },
}
</script>

<style lang="scss" scoped>
.loading-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  background-color: #f8f9fa;
}

.loading-spinner {
  width: 50px;
  height: 50px;
  border: 5px solid #f3f3f3;
  border-top: 5px solid #7b5cff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 20px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-message {
  font-size: 18px;
  color: #333;
}

.report-container {
  max-width: 800px;
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
}

/* 结果头部 - 渐变背景 */
.result-header-card {
  // height: 160px;
  max-width: 600px;
  margin: 0 auto;
  margin-bottom: 20px;
  padding: 12px 16px;
  color: white;
  font-family: NotoSans;
  text-align: center;
  background: linear-gradient(115deg, #775ae0 0%, #f78295 100%), #ffffff;
  border-radius: 16px;
}

.result-title {
  font-size: 16px;
  font-weight: 700;
  font-weight: bold;
  font-family: NotoSans-ExtraBold;
}

.result-description {
  font-size: 14px;
  margin-top: 8px;
}

.dimensions-results {
  margin-bottom: 40px;
}

.dimensions-results h2 {
  margin-bottom: 10px;
  font-family: NotoSans-SemiBold;
  font-size: 20px;
}

.description {
  color: #666;
  margin-bottom: 30px;
  font-family: NotoSans-SemiBold;
}

.dimension-item {
  margin-bottom: 30px;
  /* padding: 20px; */
  /* border-radius: 10px; */
  /* box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); */
}

.dimension-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
}

.dimension-name {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  font-size: 16px;
  font-weight: bold;
  margin: 0;
  font-family: NotoSans-SemiBold;
  > i {
    font-family: NotoSans-ExtraBold;
    font-size: 20px;
  }
  .level {
    padding-left: 6px;
    font-size: 14px;
    color: #7853cf;
  }
}

.dimension-score {
  display: flex;
  align-items: center;
}

.score-value {
  font-size: 24px;
  font-weight: bold;
  margin-right: 10px;
}

.level-badge {
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: bold;
}

.level-badge.low {
  background-color: #d4edda;
  color: #155724;
}

.level-badge.medium {
  background-color: #fff3cd;
  color: #856404;
}

.level-badge.high {
  background-color: #f8d7da;
  color: #721c24;
}

.dimension-progress {
  // width: %;
  margin: 0 auto;
  margin-bottom: 20px;
}

.progress-bar {
  height: 6px;
  background: #eee;
  border-radius: 3px;
  position: relative;
  margin-top: 46px;
}

.progress-fill {
  height: 100%;
  background: #5ae061;
  border-radius: 3px;
  position: absolute;
  left: 0;
  top: 0;
  transition: width 0.5s ease-out;
}

.score-value {
  position: absolute;
  top: -38px;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
  background-color: #5ae061;
  padding: 4px 10px;
  border-radius: 6px;
  min-width: 32px;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 添加三角形指示器 */
.score-value::after {
  content: '';
  position: absolute;
  bottom: -6px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid #5ae061;
}

.score-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 5px;
}

.score-label {
  font-size: 14px;
  color: #666;
}

.dimension-analysis,
.dimension-note,
.dimension-suggestion {
  margin-top: 20px;
  text-align: left;
}

.analysis-section {
  margin-bottom: 15px;
  text-align: left;
  > p {
    font-size: 16px;
  }
}

.analysis-section h4,
.dimension-note h4,
.dimension-suggestion h4 {
  margin-bottom: 8px;
  color: #775ae0;
}

.dimension-note {
  padding: 16px;
  margin-top: 8px;
  border-radius: 12px;
  background: #f8f2ff;
  > .tit {
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-size: 14px;
    font-weight: bold;
    color: #775ae0;
    text-align: left;
    font-family: NotoSans-SemiBold;
    > img {
      height: 20px;
      object-fit: cover;
    }
  }
  > p {
    font-size: 14px;
    line-height: 22px;
    color: #333333;
    text-align: left;
  }

  .effect-con {
    margin-top: 8px;
    font-size: 14px;
    line-height: 22px;
    color: #333333;
    text-align: left;
  }
}

.dimension-suggestion {
  background-color: #d4edda;
  padding: 15px;
  border-radius: 5px;
}

.actions {
  display: flex;
  justify-content: center;
  margin-top: 40px;
}

.action-button {
  background-color: #775ae0;
  color: white;
  border: none;
  padding: 12px 30px;
  border-radius: 30px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.3s;
}

.action-button:hover {
  background-color: #6a4fc8;
}

.no-results {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 40px;
  text-align: center;
}

.no-results-icon {
  font-size: 30px;
  margin-bottom: 20px;
}

.no-results h2 {
  margin-bottom: 10px;
}

.no-results p {
  margin-bottom: 20px;
}

/* 分享按钮 */
.share-buttons {
  width: 100%;
  max-width: 632px;
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  padding: 0 16px;
  display: flex;
  gap: 15px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 999;
}

.show-buttons {
  opacity: 1;
  visibility: visible;
}

.share-btn,
.send-btn {
  height: 52px;
  display: flex;
  align-items: center;
  flex: 1;
  padding: 12px 0;
  border-radius: 50px;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  justify-content: center;
  align-items: center;
  > img {
    height: 24px;
    margin-right: 8px;
    object-fit: contain;
  }
}

.share-btn {
  background: #7853cf;
  color: white;
  border: none;
}

.send-btn {
  background: #fd5c63;
  color: white;
  border: none;
}

.loading-spinner-small {
  width: 18px;
  height: 18px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top: 3px solid #ffffff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-right: 8px;
  display: inline-block;
}

.share-modal-mask {
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share-modal {
  background: #fff7f8;
  width: 340px;
  padding: 0px 0px 16px;
  position: relative;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.close-btn {
  position: absolute;
  right: 0px;
  top: -40px;
  background: none;
  border: none;
  font-size: 24px;
  > img {
    width: 30px;
    height: 30px;
    object-fit: contain;
  }
}

.modal-illustration {
  width: 100%;
  height: 143px;
  object-fit: cover;
  margin: 0 auto;
}

.modal-title {
  font-size: 20px;
  font-weight: 600;
  margin: 8px 0 16px 0;
  font-family: NotoSerif-Medium;
}

.modal-trait {
  font-size: 22px;
  font-weight: bold;
  margin: 0 0 8px 0;
  color: #e5486b;
  font-family: serif;
  font-family: BerkshireSwash-Regular;
}

.modal-trait-tip {
  font-size: 12px;
  color: #666;
  font-family: NotoSans-Regular;
}

.modal-divider {
  width: 80%;
  height: 1px;
  background: #ffe3e5;
  margin: 12px auto;
}

.modal-qrcode {
  width: 110px;
  height: 110px;
  margin: 5px auto 6px;
}

.modal-tip {
  font-size: 12px;
  color: #999;
}

.save-btn {
  min-width: 200px;
  position: absolute;
  bottom: -66px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffffff;
  color: #111111;
  border: none;
  border-radius: 112px;
  height: 52px;
  font-size: 18px;
  font-weight: 600;
  font-family: NotoSans-SemiBold;
  line-height: 52px;
  text-align: center;
}

/* 添加动画 */
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* 雷达图卡片 */
.radar-chart-card {
  width: 100%;
  height: 316px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
  background: white;
  border-radius: 15px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.chart-description {
  display: block;
  width: 90%;
  margin: 8px auto 12px;
  text-align: center;
  font-size: 14px;
  color: #999;
}

.radar-chart {
  width: 100%;
}

#radar-chart-container {
  width: 100%;
  height: 250px;
  margin: 0 auto;
}
</style>
